<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border: black solid 3px">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    //四色图
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(100,20);
    ctx.lineTo(60,60);
    ctx.lineTo(20,20);
    ctx.fillStyle="green";
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(100,20);
    ctx.lineTo(100,100);
    ctx.lineTo(60,60);
    ctx.lineTo(100,20);
    ctx.fillStyle="red";
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(20,100);
    ctx.lineTo(60,60);
    ctx.lineTo(100,100);
    ctx.fillStyle="yellow";
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(20,100);
    ctx.lineTo(20,20);
    ctx.lineTo(60,60);
    ctx.lineTo(20,100);
    ctx.fillStyle="blue";
    ctx.fill();
</script>
<script>
    //渐变色彩
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    var grd=cxt.createLinearGradient(380,220,0,220);
    grd.addColorStop(0.1,"#a55027");
    grd.addColorStop(0.2,"#ff894f");
    grd.addColorStop(0.3,"#d1ff63");
    grd.addColorStop(0.4,"#00ff2a");
    grd.addColorStop(0.5,"#009cff");
    grd.addColorStop(0.6,"#00ffd8");
    grd.addColorStop(0.7,"#9c00ff");
    grd.addColorStop(0.8,"#808080");
    grd.addColorStop(0.9,"#000000");
    cxt.fillStyle=grd;
    cxt.fillRect(120,120,200,100);
</script>
<script>
    //渐变文字
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px  Verdana";
    var get=ctx.createLinearGradient(10,0,150,0);
    grd.addColorStop(0.1,"#a55027");
    grd.addColorStop(0.2,"#ff894f");
    grd.addColorStop(0.3,"#d1ff63");
    grd.addColorStop(0.4,"#00ff2a");
    grd.addColorStop(0.5,"#009cff");
    grd.addColorStop(0.6,"#00ffd8");
    grd.addColorStop(0.7,"#9c00ff");
    grd.addColorStop(0.8,"#808080");
    grd.addColorStop(0.9,"#000000");
    ctx.strokeStyle=grd;
    ctx.strokeText("马建蕾 ",200,400);
</script>
<!--音乐-->
<audio controls="controls">
    <source src="../lianxi9-5/小幸运.mp3" type="audio/mp3" />
</audio>
<!--视频-->
<video width="320" height="240" controls="controls">
    <source src="../lianxi9-5/b.mp4" type="video/mp4" />
</video>
</body>
</html>